<?php slot('title','Velzab - Asistente de creación de sitio web: Paso 2'); ?>
<script type="text/javascript">
$(document).ready(function(){
    $(".image img").hover(
        function(){
            $(this).animate({
                width: "101%",
                margin: "0px"
            },{
                duration: 100
            });
        },
        function(){
            $(this).animate({
                width: "100%",
                margin: "2px"
            },{
                duration: 100
            });
        }
    );
    $("a.thumbPlantilla").click(function(){
        var dataIdPlantilla = $(this).attr("data-id-plantilla");
        $("#hdIdPlantilla").val(dataIdPlantilla);
        $("form").submit();
    });
});
</script>
<style type="text/css">
.image img{
    margin: 2px;
}
</style>
<!-- Main -->
<section id="main" class="container">
    <!--
    <header>
        <h2>Asistente de creación de sitio web</h2>
        <p>Estás a sólo 3 pasos de tener tu idea en Internet</p>
    </header>
    -->
    <div class="row">
        <div class="12u">
            <!-- Form -->
            <section class="box">
                <h3>Paso 2 de 4</h3>
                <p>Elige la plantilla que más te guste.</p>
                <form action="<?php echo url_for('@construccionPasoDosGrabar'); ?>" method="post">
                    <input type="hidden" id="hdIdPlantilla" name="hdIdPlantilla" />
                    <?php /* ?>
                    <div class="row uniform 50%">
                        <div class="12u">
                            <div class="select-wrapper">
                                <select name="category" id="category">
                                    <option value="">- Categoría -</option>
                                    <option value="1">Personal</option>
                                    <option value="1">Portafolio</option>
                                    <option value="1">Negocios</option>
                                    <option value="1">De todo</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <?php */ ?>
                    <?php for($i=1;$i<=3;$i++){ ?>
                    <div class="row uniform 50%">
                        <div class="4u 12u(mobilep)">
                            <span class="image fit">
                                <a href="javascript:void(0);" class="thumbPlantilla" data-id-plantilla="<?php echo $i; ?>">
                                    <img src="<?php echo $sf_request->getRelativeUrlRoot()."/images/pic04.jpg"; ?>" alt="">
                                </a>
                            </span>
                        </div>
                        <div class="4u 12u(mobilep)">
                            <span class="image fit">
                                <a href="javascript:void(0);" class="thumbPlantilla" data-id-plantilla="<?php echo $i; ?>">
                                    <img src="<?php echo $sf_request->getRelativeUrlRoot()."/images/pic04.jpg"; ?>" alt="">
                                </a>
                            </span>
                        </div>
                        <div class="4u 12u(mobilep)">
                            <span class="image fit">
                                <a href="javascript:void(0);" class="thumbPlantilla" data-id-plantilla="<?php echo $i; ?>">
                                    <img src="<?php echo $sf_request->getRelativeUrlRoot()."/images/pic04.jpg"; ?>" alt="">
                                </a>
                            </span>
                        </div>
                    </div>
                    <?php } ?>
                </form>
            </section>
        </div>
    </div>
</section>